<script lang="ts" setup>
import { ref, h } from "vue";
import {
  getPageList,
  checkTheAgreement,
  download,
  deleteData
} from "@/api/merchant/management";
import { ReVxeGrid } from "@/components/ReVxeTable";
import CreateModal from "./components/IndexModal.vue";
import { VxeButton, VxeText } from "vxe-pc-ui";
import { ElMessage } from "element-plus";
import { VxeGridPropTypes, VxeUI } from "vxe-table";
import { exportFile } from "@/api/export";
import { baseUrlApi } from "@/api/utils";
let taxSourcesId = Number(sessionStorage.getItem("taxSourcesId"));
let merchantsInfoId = Number(sessionStorage.getItem("merchantsInfoId"));
const reVxeGridRef = ref();
const columns: VxeGridPropTypes.Columns<any> = [
  {
    title: "灵工姓名",
    field: "averageUserName",
    align: "center",
    minWidth: 100
  },
  {
    title: "身份证号",
    field: "identityNumber",
    align: "center",
    showOverflow: true,
    minWidth: 150
  },
  {
    title: "手机号",
    field: "mobile",
    align: "center",
    minWidth: 100
  },
  {
    title: "收款帐号",
    field: "bankCardNumber",
    align: "center",
    minWidth: 150
  },
  {
    title: "签约方式",
    field: "signingTheSourceDisplay",
    align: "center",
    minWidth: 100
  },
  {
    title: "身份证",
    field: "idCardLink",
    align: "center",
    minWidth: 80,
    slots: {
      default: ({ row }) => {
        return row.idCardLink ? [h("span", "有")] : [h("span", "无")];
      }
    }
  },
  {
    title: "创建时间",
    field: "createTime",
    align: "center",
    minWidth: 150
  },
  {
    title: "签约状态",
    field: "signedOrNotDisplay",
    align: "center",
    fixed: `right`,
    minWidth: 100
  },
  {
    title: "操作",
    field: "operate",
    align: "center",
    fixed: `right`,
    minWidth: 150,
    slots: {
      default: ({ row }) => {
        let list = [
          h(VxeButton, {
            status: "primary",
            mode: "text",
            size: "mini",
            content: "查看",
            onClick() {
              console.log(row, "row");
              createModalRef.value.showViewModal(row);
            }
          }),
          h(VxeButton, {
            status: "primary",
            mode: "text",
            size: "mini",
            content: "查看协议",
            onClick() {
              if (row.id) {
                checkTheAgreement(row.id).then(res => {
                  if (res) {
                    row.contractPdfUrl = res.data.contractPdfUrl;
                    if (!row.contractPdfUrl) {
                      ElMessage.error("查看地址不存在！");
                      return false;
                    }
                    window.open(row.contractPdfUrl, "_blank");
                  }
                });
              }
            }
          }),
          h(VxeButton, {
            status: "primary",
            mode: "text",
            size: "mini",
            content: "上传身份证",
            onClick() {
              console.log(row, "row");
            }
          }),
          h(VxeButton, {
            status: "primary",
            mode: "text",
            size: "mini",
            content: "移除",
            async onClick() {
              const type = await VxeUI.modal.confirm("您确定移除该灵工");
              if (type == "confirm") {
                deleteData(row.id).then(res => {
                  if (res) {
                    ElMessage.success(res.msg);
                    handleSearch();
                  }
                });
              }
            }
          })
        ];
        if (!row.idCardLink) {
          return [list[0], list[1], list[2]];
        } else {
          return list;
        }
      }
    }
  }
];
const formRef = ref();

const handleInitialFormParams = () => ({
  taxSourcesId: taxSourcesId,
  merchantsInfoId: merchantsInfoId,
  averageUserName: "",
  identityNumber: "",
  mobile: "",
  signedOrNot: null,
  createTimeStart: "",
  createTimeEnd: "",
  timeRang: []
});
const formItems = [
  {
    field: "averageUserName",
    title: "",
    span: 4,
    itemRender: { name: "$input", props: { placeholder: "请输入灵工姓名" } }
  },
  {
    field: "identityNumber",
    title: "",
    span: 4,
    itemRender: { name: "$input", props: { placeholder: "请输入身份证号" } }
  },
  {
    field: "signingMobile",
    title: "",
    span: 4,
    itemRender: { name: "$input", props: { placeholder: "请输入手机号" } }
  },
  {
    field: "signedOrNot",
    title: "",
    span: 4,
    itemRender: {
      name: "$select",
      props: {
        placeholder: "请选择签约状态",
        options: [
          { label: "未签署", value: "0" },
          { label: "已签署", value: "1" }
        ]
      }
    }
  },
  {
    field: "timeRang",
    title: "",
    span: 6,
    itemRender: {},
    slots: { default: "timeRang" }
  },
  {
    span: 6,
    itemRender: {
      name: "$buttons",
      children: [
        {
          props: {
            type: "submit",
            icon: "vxe-icon-search",
            content: "查询",
            status: "primary"
          }
        },
        { props: { type: "reset", icon: "vxe-icon-undo", content: "重置" } }
      ]
    }
  }
];
const formData = ref<{
  taxSourcesId: number;
  merchantsInfoId: number;
  averageUserName: string;
  identityNumber: string;
  mobile: string;
  signedOrNot: number | null;
  createTimeStart: string;
  createTimeEnd: string;
  timeRang: string[];
}>(handleInitialFormParams());

const handleSearch = () => {
  reVxeGridRef.value.loadData();
};

const handleReset = () => {
  formData.value = handleInitialFormParams();
};

const createModalRef = ref();
const handleAdd = () => {
  createModalRef.value.showAddModal();
};
const handleEdit = (record: Recordable) => {
  createModalRef.value.showEditModal(record);
};

const handleView = (record: Recordable) => {
  console.log("handleView");
  createModalRef.value.showViewModal(record);
};
const toexport = () => {
  if (formData.value?.timeRang?.length) {
    formData.value.createTimeStart = formData.value.timeRang[0];
    formData.value.createTimeEnd = formData.value.timeRang[1];
  } else {
    formData.value.createTimeStart = "";
    formData.value.createTimeEnd = "";
  }
  let data = formData.value;
  delete data["timeRang"];
  // exportFile
  exportFile(
    baseUrlApi("business/average_user_merchants_deal/listBackstageExport"),
    data
  );
};
const functions: Record<string, string> = {
  // add: "merchant.project.list.add",
  // edit: "merchant.project.template.edit",
  view: "merchant.management.index.view",
  delete: "merchant.management.index.delete"
};
</script>
<template>
  <div>
    <el-card :shadow="`never`">
      <vxe-form
        ref="formRef"
        :data="formData"
        :items="formItems"
        @submit="handleSearch"
        @reset="handleReset"
      >
        <template #timeRang="{ data }">
          <el-date-picker
            clearable
            style="width: 100%"
            v-model="data.timeRang"
            type="daterange"
            range-separator="-"
            value-format="YYYY-MM-DD"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </template>
      </vxe-form>
      <div class="mt-3" style="text-align: right">
        <el-button type="primary" @click="toexport">导出</el-button>
      </div>
    </el-card>
    <el-card :shadow="`never`" class="table-card">
      <ReVxeGrid
        ref="reVxeGridRef"
        :request="getPageList"
        :functions="functions"
        :searchParams="formData"
        :columns="columns"
        @handleAdd="handleAdd"
        @handleView="handleView"
      />
    </el-card>
    <CreateModal ref="createModalRef" @reload="handleSearch" />
  </div>
</template>
